<template>
    <div class="search-container">
        <search-nav v-if="isShow"
            :showSearch="showSearch"
        />
        <div class="search-head" @click="showSearch(true)">
            <h1 class="search-title">搜索</h1>
            <div class="search-bor">
                <a>
                    <div class="search">
                        <img src="./images/search.png">
                        <span>输入搜索内容</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="search-nav">
            <div class="categoryNav-left">
                <ul>
                    <li v-for="(navs,index) in searchgoods"
                        :key="index"
                        :class="{current: index===InCurrent}"
                        @click=" LeftScroll(index)"
                        ref="leftLi"
                    ><span>{{navs.name}}</span></li>
                </ul>
            </div>
            <div class="categoryNav-right">
                <ul ref="categoryUi">
                    <li class="categoryLi" v-for="(navs,index1) in searchgoods" :key="index1">
                        <div class="shop-title">
                            <span>{{navs.name}}</span>
                            <a>查看全部<i> ></i></a>
                        </div>
                        <ul class="nav-icon" v-if="!navs.tag == ''">
                            <li v-for="tag in navs.category"><img :src="tag.icon"></li>
                        </ul>
                        <ul class="category-list">
                            <li class="category-item" v-for="item in navs.items">
                                <img :src="item.icon" alt=""/>
                                <span>{{item.title}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import BScroll from 'better-scroll'
    import SearchNav from './Children/SearchNav'
    export default {
        name: "Search",
        data(){
            return{
                rightTopLi:[],
                scrollRightY:0,
                isShow:false
            }
        },
        components:{
            SearchNav
        },
        watch:{
            searchgoods(){
                this.$nextTick(()=>{
                    this._initBScroll()
                    this._initRightLiTops()
                })
            }
        },
        computed:{
            ...mapState(['searchgoods']),
            InCurrent(){
             return this.rightTopLi.findIndex((topLi,index)=>{
                 this._initLeftNav(index)
                  return this.scrollRightY>=topLi && this.scrollRightY<this.rightTopLi[index + 1]
                })
            }
        },
        mounted(){
            this.$store.dispatch('reqSearchGoods');

        },
        methods:{
            _initBScroll(){
                this.leftscroll = new BScroll('.categoryNav-left',{
                    scrollY: true,
                    click: true

                });
                this.rightscroll = new BScroll('.categoryNav-right',{
                    scrollY: true,
                    click: true,
                    probeType:2
                });
                this.rightscroll.on('scroll',(obj)=>{
                    this.scrollRightY=Math.abs(obj.y);
                });
            },
            // 1.2 求出右边所有版块的头部位置
            _initRightLiTops() {
                // 1.2.1 临时数组
                const tempArr = [];
                // 1.2.2 定义变量记录高度
                let top = 0;
                tempArr.push(top);
                // 1.2.3 遍历li标签, 取出高度
                let allLis = this.$refs.categoryUi.getElementsByClassName('categoryLi');
                Array.prototype.slice.call(allLis).forEach(li => {
                    top += li.clientHeight;
                    tempArr.push(top);
                });
                // 1.2.4 更新数据
                this.rightTopLi = tempArr;
            },
            LeftScroll(index){
                this.scrollRightY = this.rightTopLi[index];
                this.rightscroll.scrollTo(0,-this.scrollRightY,300)
            },
            _initLeftNav(index){
                let el = this.$refs.leftLi[index];
                this.leftscroll.scrollToElement(el,300,0,-100)
            },
            showSearch(txt){
                this.isShow=txt
            }
        }
    }
</script>

<style scoped lang="stylus">
    body
        background-color: red
    .search-container
        width: 100%
        height 100%
        background-color: #f5f5f5
        margin-top 93px!important
    .search-head
        position fixed
        top 0
        left 0
        z-index 999
        width 100%
    .search-title
        width: 100%
        height: 35px
        text-align center
        line-height 45px
        font-size 16px
        background-color #fff
    .search-bor
        background-color #fff
        border-bottom 1px solid #c7c7c7
        padding 8px 15px
        .search
            background-color #e0e0e0
            padding 12px 0
            border-radius 10px
            display flex
            align-items center
            justify-content center
            font-size 16px
            width: 100%
            img
                width: 5%
                margin-right: 10px;
    .search-nav
        height 100%
        width 100%
        display flex
    .categoryNav-left
        width 90px
        background-color: #ededed
        overflow hidden
        height 100%
        li
            height 50px
            line-height 50px
            text-align center
            color #666
            font-size 16px
            position relative
            font-weight lighter
        .current
            background-color #fff
            color red
        .current::before
            content:''
            background-color red
            width 4px
            height 30px
            position absolute
            left 0
            top 10px
    .categoryNav-right
        width: 100%
        height: 100%
        background-color #fff
        overflow hidden
        .shop-title
            height 50px
            padding 0 20px
            display flex
            justify-content space-between
            align-items center
            font-weight lighter
        .nav-icon
            display flex
            flex-direction row
            align-items center
            justify-content center
            flex-wrap wrap
            li
                width: 33.3%
                display flex
                align-items center
                justify-content center
                img
                    width 80%
                    margin 10px 0
    .category-list
        display flex
        flex-direction row
        flex-wrap wrap
        .category-item
            width: 33.3%
            font-weight lighter
            font-size 14px
            color #000
            display flex
            flex-direction column
            align-items center
            justify-content center
            margin-bottom 15px
            img
                width: 80%
                margin-bottom 8px
</style>